<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        hand
        @submit="handleSearch"
        @reset="handlerReset"
      >
        <Button
          type="info"
          :loading="dcLoading"
          icon="export"
          @click="handleExport"
          >导出</Button
        >
      </FilterForm>
    </Container>
    <Container height="fill" display="flexY">
      <Table
        :index="true"
        :columns="tableColumns"
        :loading="tableLoading"
        :data="tableData"
        :pagination="{
          total: total,
          current: currentPage,
          pageSize: pageSize
        }"
        @sortChange="handleSortChange"
        @paginationChange="pageChange"
      >
        <template #initialBalance="{ row }">{{
          row.initialBalance | numberToCurrency
        }}</template>
        <template #endBalance="{ row }">{{
          row.endBalance | numberToCurrency
        }}</template>
        <template #deptCode="{ row }">
          {{ row.deptCode }}
          <!-- <div class="text-btn" @click="handleSzmx(row)">{{ row.deptCode }}</div> -->
        </template>
      </Table>
      <!-- 科主任基金明细-->
      <!-- <Drawer
        title="科主任基金明细"
        :visible="isShow"
        :header-color="'#e7ecf8'"
        width="90%"
        :footer-btns="[
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @cancel="isShow = false"
      >
        <SalaryPayDetails
          v-if="isShow"
          ref="detail"
          :current-row="currentRow"
          :current-date="$refs.filterForm.getParms().yearMonth"
        />
      </Drawer>-->
    </Container>
  </ContainerGroup>
</template>
<script>
// import SalaryPayDetails from './details'
import {
  listDeptDirectorFundBalance,
  listAllDept,
  downloadDeptKzr
} from '@/apis/kzrFound'
import {
  queryAllProjectDetail,
  queryAllProjectDetailOn,
  downloadAllDetailProject
} from '@/apis/specialFunds/systermSetting'
export default {
  name: 'DeptSummary', // 科主任基金科室数据汇总
  components: {
    // SalaryPayDetails
  },
  data() {
    return {
      xptApi: downloadAllDetailProject,
      sApi: [queryAllProjectDetail, queryAllProjectDetailOn],
      // isShow: false,
      dcLoading: false,
      filterElements: [
        {
          key: 'yearMonth',
          label: '时间',
          mode: 'month',
          type: 'datePicker',
          format: 'yyyy-MM',
          value: this.$util.currentDate(0),
          expiredDate: {
            disabledDate(time) {
              const start = new Date('2019-01')
              return (
                time.getTime() < start.getTime() - 1000 * 60 * 60 * 24 ||
                time.getTime() > new Date().getTime()
              )
            }
          },
          width: 240
        },
        {
          key: 'deptCode',
          type: 'Select',
          label: '科室',
          value: '',
          itemLabel: 'deptName',
          itemValue: 'deptCode',
          options: [],
          filterable: true,
          clearable: true,
          width: 250
        }
      ],
      tableColumns: [
        {
          title: '科室编码',
          dataIndex: 'deptCode',
          type: 'otherTag'
        },
        {
          title: '科室名称',
          dataIndex: 'deptName'
        },
        // {
        //   title: '期初余额',
        //   dataIndex: 'initialBalance',
        //   type: 'otherTag'
        // },
        {
          title: '期末余额',
          dataIndex: 'endBalance',
          sortable: 'custom',
          type: 'otherTag'
        }
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      // currentRow: null,
      time: []
    }
  },
  created() {
    this.getSelect(2, '项目类别') // 项目类别
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      if (order === 'ascending') {
        // 升序
        this.getData('ASC')
      } else if (order === 'descending') {
        // 降序
        this.getData('DESC')
      }
    },
    getSelect(type, code) {
      listAllDept({
        type: code
      }).then((res) => {
        if (res.data.code === 200) {
          this.filterElements[1].options = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // handleSzmx(row) {
    //   this.currentRow = row
    //   this.$nextTick(() => {
    //     this.isShow = true
    //   })
    // },
    handleExport() {
      // 导出
      const param = {
        dateTimeStart: '2019-01-01',
        dateTimeEnd: this.$refs.filterForm.getParms()?.yearMonth + '-01',
        deptCode: this.$refs.filterForm.getParms()?.deptCode
      }
      this.dcLoading = true
      downloadDeptKzr(param).then((res) => {
        this.dcLoading = false
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '科主任基金数据汇总.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData()
    },
    getData(sort = '') {
      const params = {
        dateTimeStart: '2019-01-01',
        dateTimeEnd: this.newCondition?.yearMonth + '-01',
        deptCode: this.newCondition?.deptCode,
        // period: this.newCondition?.period,
        sort: sort,
        num: this.currentPage,
        size: this.pageSize
      }
      this.tableLoading = true
      this.tableData = []
      listDeptDirectorFundBalance(params)
        .then((res) => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handlerReset() {
      this.$refs.filterForm.handleForceSet({
        yearMonth: this.$util.currentDate(0),
        deptCode: ''
      })
      this.handleSearch({
        yearMonth: this.$util.currentDate(0),
        deptCode: ''
      })
    },
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
